<template>
  <div>
    <!-- <baidu-map style="width:50vw;height: 50vh;" center="杭州" :scroll-wheel-zoom="true">
      <bm-control>
    </bm-control>
    </baidu-map> -->
    <div :ref="`bmapChart${id}`" class="bmap-chart"></div>
  </div>
</template>

<script>
import commonMixin from '@/utils/mixin'
import 'echarts/extension/bmap/bmap' // bmap用来处理百度地图
import { Flip } from 'number-flip'
export default {
  name: 'bmapChart',
  mixins: [commonMixin],
  props: {
    id: {
      type: [Number, String],
      default: 1
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      startI: 0,
      i: 0,
      config: {
        number: [1001],
        content: '{nt}个'
      },
      resDebounce: null, // 防抖
      chart: null, // chart实例,
      dataList: [
        { name: '嘉兴', value: [120.750865, 30.762653, Math.ceil(Math.random() * 100)] },

        { name: '南京', value: [118.804147, 32.070037, Math.ceil(Math.random() * 100)] },

        { name: '苏州', value: [120.619585, 31.299379, Math.ceil(Math.random() * 100)] },

        { name: '南平', value: [118.178459, 26.635627, Math.ceil(Math.random() * 100)] },

        { name: '徐州', value: [117.184811, 34.261792, Math.ceil(Math.random() * 100)] }
      ]
    }
  },
  mounted() {
    this.initChart()
    this.carouselTooltip()
    setInterval(() => {
      this.chart.setOption({
        series: [{
          name: '测试',
          data: [
            { name: '嘉兴', value: [120.750865, 30.762653, Math.ceil(Math.random() * 100)] },

            { name: '南京', value: [118.804147, 32.070037, Math.ceil(Math.random() * 100)] },

            { name: '苏州', value: [120.619585, 31.299379, Math.ceil(Math.random() * 100)] },

            { name: '南平', value: [118.178459, 26.635627, Math.ceil(Math.random() * 100)] },

            { name: '徐州', value: [117.184811, 34.261792, Math.ceil(Math.random() * 100)] }
          ]
        }]
      })
    }, 3000)
  },
  methods: {
    // 初始化
    initChart() {
      this.chart = this.$echarts.init(this.$refs[`bmapChart${this.id}`])

      // this.loadMap('100000', 'china')
      const option = this.getOption()
      this.chart.setOption(option)

      console.log(this.chart.getModel(), 'bmap')

      var bmap = this.chart.getModel().getComponent('bmap').getBMap()
      // console.log(BMapGL)
      // var dist = new BMapGL.DistrictLayer({
      //   name: '(北京,天津,河北省)',
      //   fillColor: '#5e8bff',
      //   fillOpacity: 1
      // })
      // bmap.addDistrictLayer(dist)

      var pt = new BMap.Point(116.417, 39.909)
      var markerTem = new BMap.Marker(pt) // 创建标注
      bmap.addOverlay(markerTem) // 将标注添加到地图中
      setTimeout(() => {
        this.chart.setOption({
          series: [
            { name: '测试', symbolSize: 15, animationDurationUpdate: 300 }
          ]
        })
        setTimeout(() => {
          // this.chart.setOption({
          //   series: [
          //     { name: '测试', symbolSize: 30, animationDurationUpdate: 300 }
          //   ]
          // })
          setInterval(() => {
            // this.chart.dispatchAction({
            //   type: 'showTip',
            //   seriesIndex: 0,
            //   dataIndex: this.startI
            // })
            // this.startI++
            // if (this.startI === this.dataList.length) {
            //   this.startI = 0
            // }
            // this.chart.setOption({
            //   series: [
            //     { name: '测试', symbolSize: this.i % 2 === 0 ? 30 : 15, animationDurationUpdate: 300 }
            //   ]
            // })
            this.i++
          }, 1000)
        }, 300)
      }, 300)

      this.chart.on('click', function(e) {
        console.log(e) //  每个标识点的信息
      })

      this.chart.on('mouseover', function(params) {
        console.log(params)
      })

      this.resDebounce = this.debounce(this.chart.resize, 300)
      window.addEventListener('resize', this.resDebounce)
    },

    // 轮播tooltip方法
    carouselTooltip() {
      // if (this.timer) clearInterval(this.timer)
      // this.timer = setInterval(() => {
      //   this.chart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: this.startI
      //   })
      //   this.startI++
      //   if (this.startI === this.dataList.length - 1) {
      //     this.startI = 0
      //   }
      // }, 1000)
    },

    // 自定义配置
    getOption(options = {}) {
      const name = options.name || ''
      const option = {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(res) {
            return res.name + ':' + res.value[2]
          }
        },
        bmap: {
          center: [100.114129, 30.550339],
          zoom: 5.5,
          maxZoom: 18,
          minZoom: 1,
          roam: true,
          // 百度地图的旧版自定义样式，见 https://lbsyun.baidu.com/custom/index.htm
          mapStyle: {
            style: 'dark'
          },
          // 百度地图 3.0 之后的新版自定义样式，见 https://lbsyun.baidu.com/index.php?title=open/custom
          mapStyleV2: {
            // style: 'dark'
            // styleJson: [{
            //   featureType: 'land',
            //   elementType: 'geometry',
            //   stylers: {
            //     color: '#212121ff'
            //   }
            // }, {
            //   featureType: 'OCEAN',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off',
            //     color: '#181818ff'
            //   }
            // }, {
            //   featureType: 'road',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'road',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'water',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'water',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'district',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'town',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'town',
            //   elementType: 'labels.icon',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'village',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'island',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'boundary',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'on'
            //   }
            // }, {
            //   featureType: 'districtlabel',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'on'
            //   }
            // }, {
            //   featureType: 'poilabel',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'poilabel',
            //   elementType: 'labels.icon',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'green',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'WATEROTHER',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'WATEROTHER',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'manmade',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'manmade',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'building',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'subwaystation',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'shopping',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'estate',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'parkinglot',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'playground',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'transportation',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'transportation',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'entertainment',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'scenicspots',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'scenicspots',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'medical',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'medical',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'education',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'education',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'nationalway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'highway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'highway',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'cityhighway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'cityhighway',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'arterial',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'arterial',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'arterial',
            //   elementType: 'labels.icon',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'tertiaryway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'tertiaryway',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'tertiaryway',
            //   elementType: 'labels.icon',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'fourlevelway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'fourlevelway',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'fourlevelway',
            //   elementType: 'labels.icon',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'local',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'local',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'local',
            //   elementType: 'labels.icon',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'scenicspotsway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'universityway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'vacationway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'districtlabel',
            //   elementType: 'labels.icon',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'continent',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'on'
            //   }
            // }, {
            //   featureType: 'background',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'on'
            //   }
            // }, {
            //   featureType: 'OCEAN',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'LANDABROAD',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'LANDDOMESTIC',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'on'
            //   }
            // }, {
            //   featureType: 'provincialway',
            //   elementType: 'geometry',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }, {
            //   featureType: 'provincialway',
            //   elementType: 'labels',
            //   stylers: {
            //     visibility: 'off'
            //   }
            // }]
          },
          // 百度地图的初始化配置，见 https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a0b1
          mapOptions: {
            // 禁用百度地图自带的底图可点功能
            enableMapClick: false,
            minZoom: 5,
            maxZoom: 6

          }
        },
        // visualMap: [{
        //   type: 'continuous',
        //   show: false,
        //   top: 'top',
        //   min: 0,
        //   max: 100,
        //   seriesIndex: 0,
        //   calculable: false,
        //   // range: [4, 15],
        //   inRange: {
        //     color: ['blue', 'blue', 'green', 'yellow', 'red']
        //   }
        // }],
        series: [
          // 地图
          // {
          //   name: 'map',
          //   type: 'map',
          //   map: name,
          //   // coordinateSystem: 'bmap',
          //   // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
          //   groundPlane: {
          //     // 是否显示地面。[ default: false ]
          //     show: false,
          //     // 地面颜色。[ default: '#aaa' ]
          //     color: '#aaa'
          //   },
          //   scaleLimit: {
          //     // 滚轮缩放的极限控制
          //     min: 1,
          //     max: 2
          //   },
          //   selectedMode: false, // 是否允许选中多个区域
          //   roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          //   // 地区地名显示
          //   label: {
          //     show: false,
          //     color: '#000'
          //   },
          //   // 地区样式 鼠标滑过
          //   itemStyle: {
          //     label: {
          //       show: true,
          //       color: '#fff'
          //     },
          //     color: '#fff',
          //     borderColor: '#32CBE0',
          //     borderWidth: 1.5,
          //     areaColor: {
          //       type: 'linear-gradient',
          //       x: 0,
          //       y: 1000,
          //       x2: 0,
          //       y2: 0,
          //       colorStops: [
          //         {
          //           offset: 0.5,
          //           color: '#0D59C1' // 0% 处的颜色
          //         },
          //         {
          //           offset: 1,
          //           color: '#53C9C7' // 100% 处的颜色
          //         }
          //       ],
          //       global: true // 缺省为 false
          //     },
          //     emphasis: {
          //       label: {
          //         show: true,
          //         color: '#fff'
          //       },
          //       borderWidth: 3,
          //       borderColor: 'rgba(255, 230, 175,0.8)',
          //       shadowColor: 'rgba(255, 230, 175,0.5)',
          //       shadowBlur: 30,
          //       textStyle: {
          //         color: 'red',
          //         fontSize: 12,
          //         backgroundColor: 'transparent'
          //       },
          //       areaColor: new this.$echarts.graphic.LinearGradient(
          //         0,
          //         0,
          //         0,
          //         1,
          //         [
          //           {
          //             offset: 0,
          //             color: '#1cfbfe'
          //           },
          //           {
          //             offset: 1,
          //             color: '#3348e7'
          //           }
          //         ],
          //         false
          //       )
          //     }
          //   },
          //   // 选中的状态
          //   select: {
          //     label: {
          //       show: true
          //     },
          //     itemStyle: {
          //       areaColor: '#0b59a3'
          //     }
          //   },
          //   // 地理数据
          //   data: this.allData
          // },
          {
            name: '测试',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            // pointSize: 20,
            // blurSize: 6,
            data: this.dataList,
            symbolSize: function(val) {
              return 60
            },
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              formatter: (data) => {
                return data.name
              },
              fontSize: 20,
              padding: [3, 4, 5, 6],
              width: 200,
              height: 200,
              position: 'top',
              show: true,
              color: '#fff'
            },
            markArea: {
              show: true
            },
            emphasis: {
              disabled: true
            },
            encode: {
              value: 2
            },
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: 'red' // 0% 处的颜色
                }, {
                  offset: 1, color: 'blue' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              shadowBlur: 10,
              shadowColor: 'yellow',
              shadowOffsetX: 0,
              shadowOffsetY: 0
            },
            animationDurationUpdate: 300
          }
        ]
      }
      return option
    },

    /**
     * @description: 请求路径
     * @param {*} mapCode 区域代码
     * @param {*} level 行政级别
     * @return {*}
     * @author: chen qi
     */
    getMapUrl(mapCode, level) {
      let url
      // 省,市 (除台湾)
      if ((level === 'province' || level === 'city' || level === '') && mapCode !== 710000) {
        url = `https://geo.datav.aliyun.com/areas_v3/bound/${mapCode}_full.json`
      } else {
        url = `https://geo.datav.aliyun.com/areas_v3/bound/${mapCode}.json`
      }
      return url
    },
    /**
     * @description://获取数据绘制图表
     * @param {*} mapCode 区域代码
     * @param {*} name  地区名字
     * @param {*} level 行政级别
     * @return {*}
     * @author: chen qi
     */
    loadMap(mapCode, name = '', level = '') {
      const url = this.getMapUrl(mapCode, level)
      this.$axios.get(url).then(res => {
        const { data } = res
        this.allData = data.features.map(item => {
          return {
            ...item.properties,
            value: Math.round(Math.random() * 100)
          }
        }).filter(item => item.name !== '')
        this.$echarts.registerMap(name, data)
        const option = this.getOption({ name })
        this.chart.setOption(option, true, true)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  destroyed() {
    // 防止内存泄露
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    window.addEventListener('resize', this.resDebounce)
  }
}
</script>

<style lang="less" scoped>
.bmap-chart {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}
</style>
